<template>
	<view class="content" :style="{
      'padding-top': height + 'px',
    }">
		<view class="daohanglan" :style="{
        height: statusBarHeight + 'px',
      }">
		</view>
		<view :style="{
        height: statusBarHeight + 'px',
      }">
		</view>
		<view class="head" :style="{
        top: statusBarHeight + 'px',
        background: '#fff',
      }">
			<view class="head_left">
				<u-icon name="arrow-left" color="#444444" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class=""> 内容详情 </view>
			<view class="head_right">
				<view class="zhuan">
					<image src="@/static/images/slices/icon_bai_zhunfa.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box_head" v-if="datas.user">
				<view class="head_image">
					<image :src="datas.user.avatar_url" mode=""></image>
				</view>
				<view class="head_flx">
					<view class="flx1">
						{{ datas.user.nick_name }}
					</view>
					<view class="flx2"> 发布讨论 </view>
				</view>

				<view class="head_right_1" v-if="datas.user.is_guanzhu" @click="handGuanzhu(0)">
					<text style="margin-left: 10rpx">已关注</text>
				</view>
				<view class="head_right" v-else @click="handGuanzhu(1)">
					<u-icon name="plus" color="#fff"></u-icon>
					<text style="margin-left: 10rpx">关注</text>
				</view>
			</view>
			<view class="box_content">
				<view class="content_t">
					{{ datas.title }}
				</view>
				<view class="content_text">
					{{ datas.content }}
				</view>
				<!-- 图片 -->
				<!-- <view class="jiugong">
					<image v-for="(item,index) in datas.common_file" :src="item"></image>
				</view> -->

				<view class="jiugong" :class="
            datas.common_file.length == 1
              ? 'jiugong1'
              : datas.common_file.length == 4
              ? 'jiugong4'
              : ''
          " v-if="datas.common_file">
					<view class="jiugong_img" v-for="(itemValue, index) in datas.common_file" :key="index"
						@click.stop="goPreview(itemValue, datas.common_file,index)">
						<!-- 图片展示图 -->
						<image :src="itemValue.url" v-if="itemValue.file_type == 10"></image>
						<!-- 视频展示图 -->
						<image :src="itemValue.url_img" v-if="itemValue.file_type == 30"></image>
						<!-- 遮罩层 -->
						<view class="jiugong_img_mask" v-if="itemValue.file_type == 30">
							<view class="video_cover_play">
								<image src="@/static/images/icon_dtym_bofang.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="distance"></view>
		<view class="interaction">
			<view class="interaction_tabs">
				<u-tabs class="tabs" :list="list1" @click="click" :activeStyle="{
            color: '#444',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
            'font-size': '32rpx',
          }" lineColor="#444444" :inactiveStyle="{
            color: '#888888',
            transform: 'scale(1)',
            'font-size': '32rpx',
          }"></u-tabs>
			</view>
			<view class="interaction_box">
				<reviewContent :reply="reply" :reply_one="reply" :text="text" v-for="(item, index) in list"
					:value="item" :discuss_id="datas.id" :xinghe_id="datas.xinghe_id" :shenfen="datas.shenfen"
					:my_level_id="my_level_id" @reply="handReply" @refresh="refresh"></reviewContent>

				<view class="empty_view" v-if="list && list.length == 0">
					<image class="item_left_clickable" src="@/static/images/my/kong.png" mode=""></image>
					<view>暂无{{ list2[currentIndex].name }}~</view>
				</view>

				<!-- <reviewContent :reply="false" :text="text"></reviewContent>
				<reviewContent :reply="false" :text="text"></reviewContent> -->
			</view>
		</view>
		<view style="width: 100%; height: 120rpx"> </view>
		<!-- isZhe = false -->
		<view class="zhezhao" v-if="isZhe" @click="zheColse"> </view>
		<view class="operate" @click.stop="stop1">
			<scroll-view :scroll-top="99999" scroll-y="true" class="scroll-Y">
				<view class="operate_top">
					<!-- width: inp ? '340rpx' : '502rpx', -->
					<!-- width: !inp || plImage.length ? '502rpx' : '340rpx', -->
					<view class="inp" :style="{
              width: !inp || plImage.length ? '502rpx' : '340rpx',
            }">
						<u--input :focus="focusKuwei" :placeholder="plsText" border="none"
							placeholderStyle="font-size:30rpx;color:#ADADAD;" color="#ADADAD" v-model="value"
							@change="change" inputAlign="left" @focus="focus" @blur="blur"></u--input>
					</view>
					<view class="operate_r" v-if="inp && plImage.length == 0">
						<view class="operate_item" @click.stop="handLike(datas.is_like)">
							<image src="../../static/images/slices/icon_tlzxq_dianzan_xuanzhong.png" mode=""
								v-if="datas.is_like"></image>
							<image src="../../static/images/slices/icon_tlzxq_dianzan.png" mode="" v-else></image>
							<view class="item_text" :style="{
                  color: datas.is_like ? '#55B877' : '#888888',
                }">
								点赞
							</view>
						</view>
						<view class="operate_item">
							<image src="../../static/images/slices/icon_tlzxq_zhuanfa.png" mode=""></image>
							<view class="item_text"> 转发 </view>
						</view>
						<view class="operate_item" @click.stop="handCollect(datas.is_shoucang)">
							<image src="../../static/images/slices/icon_bai_shoucang.png" v-show mode=""
								v-show="!datas.is_shoucang"></image>
							<image src="../../static/images/slices/icon_shoucang_z.png" mode=""
								v-show="datas.is_shoucang"></image>
							<view class="item_text" :style="{
                  color: datas.is_shoucang ? '#55B877' : '#888888',
                }">
								收藏
							</view>
						</view>
						<view class="operate_item" @click="givePresent">
							<image src="../../static/images/slices/icon_tlzxq_liwu.png" mode=""></image>
							<view class="item_text"> 礼物 </view>
						</view>
					</view>
					<view class="sending_btn" v-else-if="!inp || plImage.length" @click="send">
						发送
					</view>
				</view>
				<view class="mod_img" v-if="fileType == 2 && isZhe">
					<image :src="item.preview_url" v-for="(item, index) in plImage"></image>
				</view>
				<view style="width: 100%; padding: 0 50rpx 0 30rpx; box-sizing: border-box"
					v-if="fileType == 1 && isZhe">
					<com-audio :showDelBtn="true" :src="plImage[0].preview_url"></com-audio>
					<!-- <progressBar :way="1" color="#444444" :src="plImage[0].preview_url"></progressBar> -->

					<!-- <progressBar :showDelBtn="true" :way="1" color="#444444" :src="'https://image.yitian369.net/10001/20240112/15df70365d9d67628eee48c41bb941ec.mp3'"></progressBar> -->
				</view>

				<view class="mod_icon" v-if="isZhe">
					<view class="check_image" @click.stop="current_icon = 0">
						<image src="@/static/images/icon_tlzxq_jianpan.png" mode=""></image>
					</view>
					<view class="check_image" @click.stop="current_icon = 1">
						<image src="@/static/images/icon_tlzxq_yuyin.png" mode=""></image>
					</view>
					<view class="check_image" @click.stop="uploadFile">
						<image src="@/static/images/icon_tlzxq_tupian.png" mode=""></image>
					</view>

					<!-- <image src="@/static/images/icon_tlzxq_yuyin.png" mode=""></image>
	  <image src="@/static/images/icon_tlzxq_tupian.png" mode=""></image> -->
				</view>

				<view class="mod_sound_btn" v-if="current_icon == 1 && isZhe">
					<view class="btn_view" @touchstart.stop="touchstart" @touchend.stop="touchend">
						<text class="btn_view_time" v-show="!isTranscribe">00.000</text>
						<u-count-to v-show="isTranscribe" :autoplay="autoplay" ref="uCountTo" :startVal="0" :endVal="60"
							:decimals="3" :duration="60000" :useEasing="false" fontSize="48rpx"
							color="#fff"></u-count-to>
						<!-- <view class="btn_view_time">{{ time }}</view> -->
						<view class="btn_view_text" v-if="!isTranscribe">{{ start }}</view>
						<view class="btn_view_text" v-if="isTranscribe">{{ end }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<u-popup :show="show" mode="bottom" safeAreaInsetTop @close="show = false" @open="show = true" closeable>
			<view class="box_group">
				<view class="group_title"> 送出礼物 </view>
				<view class="group_inp">
					<u--input placeholder="请输入赠送数量..." border="none" placeholderStyle="font-size:30rpx;color:#ADADAD;"
						color="#ADADAD" v-model="presentNum" type="number" inputAlign="left"></u--input>
				</view>
				<view class="group_btn">
					<view class="niule">
						<view class="niule_icon"> </view>
						<view class="niule_text" v-if="datas.userInfo">
							{{ datas.userInfo.niule }}牛勒
						</view>
					</view>
					<view class="group_btn1" @click="colsePresent"> 送出 </view>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="show1" @close="close1" @open="open1">
			<view class="pop_live">
				<view class="pop_live_title">
					请选择查看需要的行者权限
				</view>
				<u-radio-group 
				    v-model="live"
					activeColor="rgb(85, 184, 119)"
				    iconPlacement="right">
					<view class="pop_live_box">
						<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(item.level_id)" v-for="(item,index) in liveList" :key="item.level_id">
							<!-- 元气驿站 -->
							{{item.level_name}}
							<u-radio :name="item.level_id"></u-radio>
						</view>
						<!-- <view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(2)">
							启初梦谷
							<u-radio :name="2"></u-radio>
						</view>
						<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(3)">
							青空天台
							<u-radio :name="3"></u-radio>
						</view>
						<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(4)">
							无极云顶
							<u-radio :name="4"></u-radio>
						</view>
						<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(5)">
							返朴归源
							<u-radio :name="5"></u-radio>
						</view> -->
						
						<view class="pop_live_btn">
							<view class="live_btn" @click="liveColse">
								取消
							</view>
							<view class="live_btn" style="background: rgb(85, 184, 119);color: #fff;" @click="liveSubmit">
								确定
							</view>
						</view>
					</view>
					
				</u-radio-group>
			</view>
		</u-popup>
		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import reviewContent from "@/components/search/reviewContent.vue"; //评论
	import {
		userGuanzhu
	} from "@/common/http.js";
	import {
		Detail,
		discussDetail,
		huifuDianzan,
		sendGift,
		likeDiscuss,
		huifuDiscuss,
		shoucang,
	} from "@/common/api/start.js";
	import config from "@/config"; // 配置文件
	import storage from "@/common/storage.js"; // 缓存封装
	import getRecorderManager from "@/common/getRecorderManager.js";
	import comAudio from "@/pages/components/audio.vue"; //语音条
	export default {
		components: {
			reviewContent,
			comAudio,
		},
		data() {
			return {
				statusBarHeight: 0,
				height: 0,
				list1: [{
						name: "回复",
					},
					{
						name: "赞",
					},
					{
						name: "转发",
					},
					{
						name: "收藏",
					},
					{
						name: "礼物",
					},
				],
				list2: [{
						name: "回复",
					},
					{
						name: "赞",
					},
					{
						name: "转发",
					},
					{
						name: "收藏",
					},
					{
						name: "礼物",
					},
				],
				currentIndex: 0,
				text: "说的真好，给你点赞一个！！！",
				value: "",
				inp: true,
				like: false,
				collect: false,
				presentNum: "",
				show: false,
				datas: {},
				id: -1,
				list: [],
				type: 1,
				reply: true,
				focusKuwei: false,
				plsText: "写回复",
				toUserId: 0,
				replyId: 0,
				current_icon: 0,
				plImage: [],
				fileType: 0, // 1音频  2视频
				isTranscribe: false,
				autoplay: false,
				start: "按住说话",
				end: "松开结束",
				isZhe: false,
				total: 0,
				page: 1,
				my_level_id: 0,
				show1: false,
				live:0,
				liveList:[]
			};
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".head")
					.boundingClientRect((data) => {
						this.height = data.height;
					})
					.exec();
			});
		},
		onLoad(options) {
			const arr = [1010, 2110, 2645, 9963, 2645];

			if (options && options.id) {
				this.id = options.id;
				this.getDetail();
				this.getList();
			}
		},
		onReachBottom() {
			console.log("this", this.total, this.list.length);
			if (this.total > this.list.length) {
				this.page += 1;
				this.getList();
			}
		},
		methods: {
			open1() {
				
			},
			close1() {
				this.show1 = false;
			},
			zheColse() {
				this.isZhe = false;
				this.fileType = 0;
				this.plImage = [];
				this.current_icon = 0;
			},
			stop1() {},
			goPreview(item, file, index) {
				// console.log(item);
				if (item.file_type == 30) {
					// console.log(111111, item);
					uni.navigateTo({
						url: `/components/preview?type=false&vimg=${item.url}`,
					});
				} else if (item.file_type == 10) {
					// console.log(222222222, item);
					// uni.navigateTo({
					//   url: `/components/preview?type=true&img=${item.url}`,
					// });

					// console.log(file,123)

					let str = [];
					for (let i = 0; i < file.length; i++) {
						if (file[i].file_type == 10) {
							str.push(file[i].url);
						}
					}

					uni.previewImage({
						urls: str,
						current: item.url,
						longPressActions: {
							itemList: ["发送给朋友", "保存图片", "收藏"],
							success: function(data) {
								console.log(
									"选中了第" +
									(data.tapIndex + 1) +
									"个按钮,第" +
									(data.index + 1) +
									"张图片"
								);
							},
							fail: function(err) {
								console.log(err.errMsg);
							},
						},
					});
				}
			},
			getList() {
				huifuDianzan({
					id: this.id,
					type: this.type,
					page: this.page,
				}).then((res) => {
					console.log("resssss", res.data);
					// this.list = res.data.list.data;
					this.total = res.data.list.total;
					this.my_level_id = res.data.my_level_id;
					this.list.push(...res.data.list.data);
				});
			},
			refresh() {
				this.getList();
			},
			getDetail() {
				discussDetail({
					id: this.id,
				}).then((res) => {
					this.datas = res.data.detail;
					const arr = [
						this.datas.comment_count,
						this.datas.like_count,
						this.datas.gift_count,
						this.datas.collect_count,
						this.datas.gift_count,
					];
					this.list1 = this.list1.map((item, index) => {
						return {
							name: item.name + arr[index],
						};
					});
					console.log("ressss", res.data.detail);
				});
			},
			handReply(val) {
				console.log("vallll", val);
				this.plsText = "回复@ " + val.user.nick_name;
				this.replyId = val.id;
				this.toUserId = val.user.user_id;
				this.focusKuwei = true;
			},
			handGuanzhu(item) {
				let that = this;
				if (item == 0) {
					uni.showModal({
						title: "提示",
						content: "是否取消关注该用户",
						success: function(res) {
							if (res.confirm) {
								userGuanzhu({
									user_id: that.datas.user.user_id,
								}).then((res) => {
									that.datas.user.is_guanzhu = 0;
									console.log("resssss", res);
								});
							} else if (res.cancel) {
								return;
							}
						},
					});
				} else {
					userGuanzhu({
						user_id: this.datas.user.user_id,
					}).then((res) => {
						console.log("resssss", res);
						that.datas.user.is_guanzhu = 1;
					});
				}
			},
			toBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			uploadFile() {
				let token = storage.get("token");
				let that = this;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));

						uni.uploadFile({
							url: config.uni_app_web_api_url + "/api/upload/image", // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: "file",
							formData: {
								user: "test",
							},
							header: {
								"Access-Token": token,
							},
							success: (res) => {
								const data = JSON.parse(res.data);
								console.log("resssss", res, data.data.fileInfo);
								that.plImage = [{
									file_id: data.data.fileInfo.file_id,
									preview_url: data.data.fileInfo.preview_url,
								}, ];
								that.fileType = 2;
							},
						});
					},
				});
			},
			click(e) {
				console.log("222222", e);
				this.currentIndex = e.index;
				this.type = e.index + 1;
				this.reply = e.index == 0 ? true : false;
				this.list = [];
				this.page = 1;
				this.getList();
				// if (e.index == 2) {
				// 	this.text = '转发了这条动态'
				// }
				// if (e.index == 1) {
				// 	this.text = '点赞了这条动态'
				// }
			},
			change() {},
			focus() {
				this.inp = false;
				this.isZhe = true;
			},
			blur() {
				setTimeout(() => {
					this.inp = true;
				}, 0);
				this.focusKuwei = false;
				this.plsText = "写回复";
			},
			//发送消息
			send() {
				console.log("33333", this.value);
				
				this.$http.userLevelList({}).then(res => {
					if (res.data.userInfo.is_teacher == 1 || res.data.userInfo.is_senators == 1) {
						this.show1 = true;
						console.log('reessssssliiive',res);
						this.liveList = res.data.list;
						this.liveList.unshift({
							level_name:'公开',
							level_id:0
						})
					} else {
						this.huifu();
					}
				})
				
			},
			huifu(grade_auth = 0) {
				let file_id = 0;
				if (this.plImage.length) {
					file_id = this.plImage[0].file_id;
				}
				
				huifuDiscuss({
						id: this.datas.xinghe_id,
						discuss_id: this.id,
						content: this.value,
						comment_id: this.replyId,
						comment_user_id: this.toUserId,
						file_id,
						grade_auth
					})
					.then((res) => {
						console.log("ressss", res);
						this.replyId = 0;
						this.toUserId = this.datas.user.user_id;
						this.value = "";
						this.isZhe = false;
						this.fileType = 0;
						this.current_icon = 0;
						this.plImage = [];
						this.list = [];
						this.page = 1;
						this.getList();
					})
					.catch((err) => {
						this.$u.toast(err);
					});
			},
			handLike(val) {
				likeDiscuss({
					id: this.datas.xinghe_id,
					discuss_id: this.id,
					comment_id: 0,
					user_id: this.datas.user.user_id,
					grade_auth
				}).then((res) => {
					if (val) {
						this.datas.is_like = 0;
						this.$u.toast("点赞取消");
					} else {
						this.datas.is_like = 1;
						this.$u.toast("点赞成功");
					}
				});
			},
			handCollect(val) {
				shoucang({
						xinghe_id: this.datas.xinghe_id,
						discuss_id: this.datas.id,
						collect_user_id: this.datas.user.user_id,
					})
					.then((res) => {
						console.log("resssss", res);
						if (val == 0) {
							this.datas.is_shoucang = 1;
						} else {
							this.datas.is_shoucang = 0;
						}
					})
					.catch((err) => {
						console.log("ewrrrr", err);
						this.$u.toast(err);
					});
			},
			givePresent() {
				this.show = true;
			},
			touchstart() {
				console.log("2222");
				this.isTranscribe = true;
				getRecorderManager.startManager();
				this.$refs.uCountTo.start();
			},
			async touchend() {
				console.log("33333");
				this.isTranscribe = false;
				let that = this;
				let token = storage.get("token");
				const url = await getRecorderManager.stopManager();
				console.log("222222222", url);
				uni.uploadFile({
					url: config.uni_app_web_api_url + "/api/upload/audio", // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					formData: {
						user: "test",
					},
					header: {
						"Access-Token": token,
					},
					success: (res) => {
						const data = JSON.parse(res.data);

						console.log("resssssssss", data);
						that.plImage = [{
							file_id: data.data.fileInfo.file_id,
							preview_url: data.data.fileInfo.external_url,
						}, ];
						that.fileType = 1;
					},
				});
			},
			colsePresent() {
				sendGift({
						discuss_id: this.id,
						price: this.presentNum,
					})
					.then((res) => {
						console.log("ressssss", res);
						this.$u.toast("赠送成功");
						this.presentNum = "";
						this.show = false;
						this.getList();
					})
					.catch((err) => {
						console.log("errrr", err);
						this.$u.toast(err);
					});
			},
			scrollBom() {},
			handLive(live) {
				this.live = live;
			},
			liveColse() {
				this.show1 = false;
			},
			liveSubmit() {
				this.huifu(this.live);
				this.show1 = false;
			}
		},
	};
</script>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
		background: #fff;
	}

	.daohanglan {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		z-index: 9699;
	}

	.head {
		width: 100%;
		padding: 18rpx 30rpx 47rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;

		.head_left {
			position: absolute;
			left: 30rpx;
		}

		.head_right {
			position: absolute;
			right: 30rpx;
			color: #55b877;
		}

		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #444444;
		}
	}

	.zhuan {
		width: 40rpx;
		height: 38rpx;
		margin-left: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.box_head {
			width: 100%;
			display: flex;
			align-items: center;

			.head_image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.head_flx {
				flex: 1;
				height: 100rpx;
				padding-left: 24rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.flx1 {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #888888;
				}

				.flx2 {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #888888;
				}
			}

			.head_right {
				width: 142rpx;
				height: 56rpx;
				background: #55b877;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-size: 26rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.head_right_1 {
				width: 142rpx;
				height: 56rpx;
				background: #eee;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-size: 26rpx;
				color: #888888;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.box_content {
			width: 100%;

			.content_t {
				width: 100%;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #474747;
				margin-top: 56rpx;
			}

			.content_text {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #474747;
				line-height: 46rpx;
				margin-top: 40rpx;
			}

			.jiugong {
				// width: 456rpx;
				margin-top: 32rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.jiugong_img {
					width: 222rpx;
					height: 222rpx;
					margin-right: 12rpx;
					margin-bottom: 12rpx;
					position: relative;

					.jiugong_img_mask {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(1, 1, 1, 0.5);
						display: flex;
						align-items: center;
						justify-content: center;

						.video_cover_play {
							width: 80rpx;
							height: 80rpx;

							image {
								width: 80rpx;
								height: 80rpx;
							}
						}
					}
				}

				image {
					width: 222rpx;
					height: 222rpx;
				}

				.jiugong_img:nth-child(3n) {
					margin-right: 0;
				}
			}

			.jiugong1 {
				width: 400rpx;

				image {
					width: 400rpx;
				}
			}

			.jiugong4 {
				width: 460rpx;

				.jiugong_img:nth-child(3n) {
					margin-right: 12rpx;
				}

				.jiugong_img:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}

	.distance {
		width: 100%;
		height: 16rpx;
		background: #f7f8fa;
		margin-top: 80rpx;
	}

	.interaction {
		width: 100%;

		.interaction_tabs {
			border-bottom: 1rpx solid #eee;
		}

		.interaction_box {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}

	.zhezhao {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.operate {
		width: 100%;
		// height: 120rpx;
		background: #fff;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		// padding-left: 20rpx;
		// padding-right: 30rpx;
		padding: 16rpx 30rpx 16rpx 20rpx;
		box-sizing: border-box;
		z-index: 101;

		.operate_top {
			width: 100%;
			display: flex;
			align-items: center;
		}

		.inp {
			height: 80rpx;
			background: #f4f4f4;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding-left: 32rpx;
		}

		.operate_r {
			width: 264rpx;
			height: 92rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 48rpx;

			.operate_item {
				image {
					width: 48rpx;
					height: 48rpx;
				}

				.item_text {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 8rpx;
				}
			}
		}

		.sending_btn {
			width: 172rpx;
			height: 80rpx;
			background: #55b877;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 16rpx;
		}
	}

	.box_group {
		width: 100%;
		height: 576rpx;
		background: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;

		.group_title {
			width: 100%;
			padding: 32rpx 0 56rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
		}

		.group_inp {
			width: 100%;
			height: 80rpx;
			background: #f4f4f4;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.group_btn {
			width: 100%;
			padding: 200rpx 60rpx 46rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.niule {
				display: flex;
				align-items: center;

				.niule_icon {
					width: 12rpx;
					height: 12rpx;
					background: #55b877;
					border-radius: 50%;
				}

				.niule_text {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #444444;
					margin-left: 16rpx;
				}
			}

			.group_btn1 {
				width: 172rpx;
				height: 64rpx;
				background: #55b877;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}

	.mod_icon {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
		margin-bottom: 38rpx;

		.check_image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 28rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.mod_icon_item {
			margin-right: 32rpx;
		}
	}

	.empty_view {
		margin-top: 100rpx;

		image {
			margin: 0 auto;
			width: 410rpx;
			height: 410rpx;
		}

		view {
			font-size: 30rpx;
			color: #d8d8d8;
			text-align: center;
		}
	}

	.mod_img {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 16rpx 30rpx;

		image {
			width: 222rpx;
			height: 222rpx;
			margin-bottom: 12rpx;
			margin-right: 12rpx;
		}

		image:nth-child(3n) {
			margin-right: 0;
		}
	}

	.mod_sound_btn {
		padding: 106rpx 227rpx;

		.btn_view {
			width: 296rpx;
			height: 296rpx;
			background-image: url("@/static/images/pic_cjwc_luzhi.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.btn_view_time {
				color: #ffffff;
				font-size: 46rpx;
			}

			.btn_view_text {
				color: #ffffff;
				font-size: 26rpx;
				margin-top: 4rpx;
			}
		}
	}
	.pop_live {
		width: 570rpx;
		// height: 820rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #fff;
		.pop_live_title {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 30rpx;
			box-sizing: border-box;
		}
		.pop_live_box {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;
			.pop_live_item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;
				padding: 30rpx 0;
				box-sizing: border-box;
			}
		}
		.pop_live_btn {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
			margin-bottom: 28rpx;
			.live_btn {
				width: 46%;
				height: 80rpx;
				border-radius: 24rpx;
				border: 1rpx solid #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>